<template>
    <view class="page">
        <!-- 图片 -->
        <view class="box">
            <image
                src="../../static/dengluZhuce/bg.png"
                mode=""
                class="bg"
            ></image>
            <image
                src="../../static/dengluZhuce/logo.png"
                mode=""
                class="logo"
            ></image>
        </view>
        <!-- 注册表单 -->
        <form action="" method="" class="biaodan">
            <view class="biaodan-img-ipt">
                <image
                    src="../../static/dengluZhuce/name.png"
                    mode=""
                    class="xiaotu"
                ></image>
                <input
                    type="text"
                    name=""
                    id=""
                    v-model="formData.username"
                    placeholder="请输入用户名"
                    placeholder-style="color:#d4d4d4;font-size:28rpx"
                    class="biaodan-ipt"
                />
            </view>
            <view class="biaodan-img-ipt">
                <image
                    src="../../static/dengluZhuce/password.png"
                    mode=""
                    class="xiaotu"
                ></image>
                <input
                    type="password"
                    name=""
                    id=""
                    v-model="formData.password"
                    placeholder="请输入密码"
                    placeholder-style="color:#d4d4d4;font-size:28rpx"
                    class="biaodan-ipt"
                />
                <image
                    src="../../static/dengluZhuce/look.png"
                    mode=""
                    class="xiaotu eye"
                ></image>
            </view>
            <view class="biaodan-t1">
                <navigator class="biaodan-t1-n" url="/pages/zhuce/zhuce"
                    >立即注册</navigator
                ><text>忘记密码?</text>
            </view>
            <button type="button" @tap="denglu">登录</button>
        </form>
        <!-- 其他登录 -->
        <view class="other">
            <image
                class="o-l"
                src="../../static/dengluZhuce/jb.png"
                mode=""
            ></image>
            <text class="other-t">其他登录方式</text>
            <image src="../../static/dengluZhuce/jb-r.png" mode=""></image>
        </view>
        <view class="four-image">
            <image src="../../static/dengluZhuce/qq.png" mode=""></image>
            <image src="../../static/dengluZhuce/wx.png" mode=""></image>
            <image src="../../static/dengluZhuce/zfb.png" mode=""></image>
            <image src="../../static/dengluZhuce/phone.png" mode=""></image>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            formData: {
                username: "18113410471",
                password: "123456",
            },
        };
    },
    methods: {
        async denglu() {
            const a = {
                password: this.formData.password,
                username: this.formData.username,
            };
            console.log(a);
            const res = await this.$request({
                url: "/member/login",
                method: "POST",
                data: a,
            });
            if (res.code == 200) {
                this.$store.state.username = a.username;
                this.$store.state.userInfo = res.data;
                uni.switchTab({
                    url: "/pages/index/index",
                });
            } else if (res.code == 601) {
                uni.showToast({
                    title: res.msg,
                    duration: 2000,
                });
            }
            console.log(res);
        },
    },
};
</script>


<style scoped lang="scss">
.page {
    //图片
    .box {
        display: flex;
        position: relative;
        padding-bottom: 80rpx;

        .bg {
            height: 320rpx;
            width: 100%;
        }

        .logo {
            position: absolute;
            width: 166rpx;
            height: 168rpx;
            left: 0;
            right: 0;
            margin: auto;
            bottom: 0;
        }
    }

    //注册表单
    .biaodan {
        margin: 0 auto;
        margin-top: 10rpx;
        width: 700rpx;
        display: flex;
        border-radius: 20rpx;
        border: 8rpx solid #fafafa;

        .xiaotu {
            width: 26rpx;
            height: 32rpx;
            margin: 0 20rpx 0 30rpx;
        }

        .biaodan-img-ipt {
            display: flex;
            align-items: center;
            position: relative;

            .eye {
                position: absolute;
                width: 40rpx;
                height: 30rpx;
                right: 0rpx;
                z-index: 99;
            }

            .codes {
                width: 280rpx;
                height: 78rpx;
                position: absolute;
                right: 0rpx;
                z-index: 99;
            }
        }

        .biaodan-ipt {
            width: 608rpx;
            height: 98rpx;
            border-bottom: 2rpx solid #fafafa;
        }

        .biaodan-t1 {
            display: flex;
            font-size: 28rpx;
            color: #868686;
            justify-content: space-between;
            flex-wrap: wrap;
            align-content: center;
            margin: 60rpx 0;
            box-sizing: border-box;
            padding: 0 30rpx;

            .biaodan-t1-n {
                color: #3476fe;
            }

            .t {
                margin-top: 6rpx;
            }
        }

        button {
            width: 642rpx;
            height: 88rpx;
            font-size: 28rpx;
            color: #ffffff;
            border-radius: 60rpx;
            background-color: #5088fc;
            line-height: 88rpx;
            margin-bottom: 54rpx;
        }
    }

    //其他登录
    .other {
        position: relative;
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: center;
        margin-top: 30rpx;

        .o-l {
            position: absolute;
            left: 208rpx;
        }

        .other-t {
            margin-left: 140rpx;
            font-size: 28rpx;
            color: #a6a6a6;
        }

        image {
            width: 152rpx;
            height: 60rpx;
        }
    }

    .four-image {
        margin-top: 30rpx;
        box-sizing: border-box;
        padding: 0 30rpx;
        display: flex;
        align-items: center;
        justify-content: space-around;

        image {
            width: 76rpx;
            height: 76rpx;
        }
    }
}
</style>
